<template>
  <basic-container>
    <el-container>
      <el-aside width="300px">
        <avue-tree
          :option="treeOption"
          :data="treeData"
          @node-click="nodeClick"
        ></avue-tree>
      </el-aside>
      <el-main>
        <avue-crud
          :data="tableData"
          :option="tableOption"
          v-model="obj"
          :page="page"
          @row-save="rowSave"
          @row-update="rowUpdate"
          @row-del="rowDelete"
          @on-load="onLoad"
          @search-change="searchChange"
          @refresh-change="searchHandler"
        >
          <template slot-scope="scope" slot="departmentIdForm">
            <avue-input-tree
              v-model="scope.row.departmentId"
              placeholder="请选择所属部门"
              :dic="treeDeptData"
              :props="defaultProps"
            ></avue-input-tree>
          </template>

          <template slot-scope="scope" slot="rolesName">
            <el-tag
              v-for="(tag, index) in scope.row.rolesName"
              :key="index"
              style="margin: 0 10px 0 0"
              >{{ tag }}</el-tag
            >
          </template>

          <template slot-scope="scope" slot="roleInfoForm">
            <el-select
              size="small"
              v-model="scope.row.roleInfo"
              multiple
              placeholder="请选择角色"
            >
              <el-option
                v-for="item in roleOption"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </template>
        </avue-crud>
      </el-main>
    </el-container>
  </basic-container>
</template>

<script>
import { getDepartment } from "@/api/permission/department"
import { getUser, deleteUser, updateUser, addUser } from "@/api/permission/user"
import { getAllRole } from "@/api/permission/role";
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
  components: { Treeselect },
  name: '',
  data() {
    return {
      roleOption: [],
      treeDeptData: [],
      defaultProps: {
        label: "name",
        value: 'id',
        children: 'childList'
      },
      departmentOption: [],
      searchForm: {
        name: '',
        staffNumber: '',
        pageSize: 10,
        currentPage: 1,
        departmentId: ''
      },
      page: {
        pageSize: 10,
        total: 100
      },
      obj: {},
      treeData: [],
      tableData: [],
      treeOption: {
        defaultExpandAll: false,
        props: {
          labelText: '标题',
          label: 'name',
          value: 'id',
          children: 'childList'
        }
      },
      tableOption: {
        border: true,
        index: true,
        indexLabel: '序号',
        stripe: true,
        menuAlign: 'center',
        editBtn: this.getPermission('user_update'),
        delBtn: this.getPermission('user_delete'),
        searchMenuSpan: 6,
        align: 'center',
        // addBtn: this.getPermission('user_add'),
        addBtn:false,
        viewBtn: this.getPermission('user_get'),
        searchBtn: true,
        columnBtn: false,
        column: [
          {
            label: '姓名',
            prop: 'name',
            span: 24,
            search: true,
            editDisabled: true,
            rules: [{
              required: true,
              message: '请输入用户姓名',
              trigger: 'blur'
            }]
          },
          {
            label: '工号',
            prop: 'teacherKey',
            span: 24,
            search: true,
            editDisabled: true,
            rules: [{
              required: true,
              message: '请输入用户工号',
              trigger: 'blur'
            }]
          },
          {
            label: '所属部门',
            prop: 'departmentName',
            span: 24,
            formslot: true,
            editDisplay: false,
            addDisplay: false
          },
          {
            label: '所属部门',
            prop: 'departmentId',
            hide: true,
            formslot: true,
            addDisplay: true,
            rules: [{
              required: true,
              message: '请选择用户部门',
              trigger: 'blur'
            }]
          },
          {
            label: '性别',
            prop: 'sex',
            span: 24,
            search: false,
            editDisabled: false,
            type: 'select',
            addDisplay: false,
            dicData: [{
              label: '男',
              value: '男'
            }, {
              label: '女',
              value: '女'
            }]
          },
          {
            label: '邮箱',
            prop: 'email',
            span: 24,
            editDisplay: true,
            addDisplay: false
          },
          {
            label: '电话',
            prop: 'mobile',
            span: 24,
            editDisplay: true,
            addDisplay: true
          },
          {
            label: '角色',
            prop: 'rolesName',
            formslot: true,
            slot: true,
            span: 24,
            editDisplay: false,
            addDisplay: false
          },
          {
            label: '角色',
            prop: 'roleInfo',
            formslot: true,
            span: 24,
            hide: true,
            addDisplay: true,
            editDisplay: true
          },
          {
            label: '密码',
            prop: 'password',
            span: 24,
            hide: true,
            addDisplay: false,
            editDisplay: false
          }
        ]
      }
    }
  }, created() {
    this.searchTreeHandler()
    this.searchHandler()
    this.searchRoleHandler()
  }, methods: {
    getPermissions(value) {
      return this.getPermission(value)
    },
    rowDelete(form) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUser([form.userId]).then(() => {
          this.$message.success('删除成功')
          this.searchHandler()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    rowUpdate(form, done, loading) {
      loading()
      updateUser(form).then(() => {
        this.$message.success('更新成功')
        this.searchHandler()
      }).finally(() => {
        // done()
      })
    },
    rowSave(form, done, loading) {
      // let myForm = {}
      // myForm.name = form.teacherName
      // myForm.mobile = form.mobile
      // myForm.idCard = form.teacherKey
      loading()
      addUser(form).then(() => {
        this.$message.success('注册成功')
        this.searchHandler()
      }).finally(() => {
        done()
      })
    },
    normalizer(node) {
      if (!node.children) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.name,
        children: node.childList
      }
    },
    searchChange(params, done) {
      this.searchForm.name = params.name
      this.searchForm.teacherKey = params.teacherKey
      this.searchForm.currentPage = 1
      this.searchForm.pageSizes = 10
      this.searchHandler()
      done()
    },
    searchRoleHandler() {
      getAllRole().then(res => {
        this.roleOption = res.data
      })
    },
    onLoad(page) {
      this.searchForm.currentPage = page.currentPage
      this.searchForm.pageSize = page.pageSize
      this.searchHandler()
    },
    searchHandler() {
      getUser(this.searchForm).then(res => {
        this.tableData = res.data.records
        this.page.total = res.data.total
        this.tableData.forEach(item => {
          item.roleInfo = JSON.parse(item.roleInfo).roleList
        })
      })
    },
    searchTreeHandler() {
      getDepartment().then(res => {
        this.treeData = res.data
        this.treeDeptData = res.data
      })
    },
    nodeClick(data) {
      this.searchForm.departmentId = data.id
      this.searchHandler()
    }
  }
}
</script>

<style lang="less" scoped>
</style>
